<template>
    <el-row>
        <el-col :span="24" class="tit-container">
            <div class="task-title">算法注册</div>
            <div>
                <el-button type="primary" :icon="Plus" @click="openAadTaskDialog"> 参数配置 </el-button>
            </div>
        </el-col>
    </el-row>
    <el-table :data="infoList" :key="tableKey" style="width: 100%" :border="true" :stripe="true"
        :height="viewHeight.toString() + 'px'" size="small" v-loading="tableLoading">
        <el-table-column prop="id" label="序号" :align="'center '" width="80" />
        <el-table-column prop="code" label="任务编码" :align="'center'">
            <template #default="scope">
                <el-check-tag checked round> {{ scope.row.code }} </el-check-tag>
            </template>
        </el-table-column>
        <el-table-column prop="taskname" label="任务名称" :align="'center '" />
        <el-table-column label="任务状态" :align="'center'">
            <template #default="scope">
                <el-switch class="switch-style" slot="reference" v-model="scope.row.taskstatus" :active-value="1"
                    :inactive-value="0" active-text="启用" inline-prompt inactive-text="停止" size="large"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" disabled
                    @click="changeTaskStatusHanlder(scope.row)" />
            </template>
        </el-table-column>
        <el-table-column prop="ruleFile" label="规则文件" :align="'center'">
            <template #default="scope">
                <div class="file-name-container">
                    <el-text class="file-name" type="primary" v-if="scope.row.ruleFile">
                        <el-icon>
                            <SetUp />
                        </el-icon>
                        {{ scope.row.ruleStore.name }}
                    </el-text>
                    <el-text class="file-name" type="" v-if="!scope.row.ruleFile">
                        <el-text type="info" size="small">
                            暂无规则文件...
                        </el-text>
                    </el-text>
                </div>
            </template>
        </el-table-column>
        <!-- <el-table-column prop="modelFile" label="模型文件" :align="'center'">
            <template #default="scope">
                <div class="file-name-container">
                    <el-text class="file-name" type="primary" v-if="scope.row.modelFile">
                        <el-icon>
                            <Menu />
                        </el-icon>
                        {{ scope.row.modelStore.name }}
                    </el-text>
                    <el-text class="file-name" type="" v-if="!scope.row.modelFile">
                        <el-text type="info" size="small">
                            暂无模型文件..
                        </el-text>
                    </el-text>
                </div>
            </template>
        </el-table-column> -->
        <el-table-column prop="mark" label="备注" :align="'center'">
            <template #default="scope">
                <el-text class="file-name" type="info" size="small">
                    {{ scope.row.mark ? scope.row.mark : "暂未填写备注..." }}
                </el-text>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200" :align="'center'" fixed="right">
            <template #default="scope">
                <el-button link type="primary" size="small" :icon="Edit" @click="openEditTaskDialog(scope.row)">
                    编辑
                </el-button>
                <el-button link type="danger" size="small" :icon="Delete" @click="deleteTaskHandler(scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-row>
        <el-col :span="24" style="padding-top: 15px">
            <pagination-com :pagination="taskPagination" @handleSizeChange="taskInfoSizeChangeHanlder"
                @handleCurrentChange="taskInfoIndexChangeHanlder"></pagination-com>
        </el-col>
    </el-row>
    <add-task-dialog ref="addTaskRef" :dialogStatus="addTaskDialogParams.dialogStatus" @onSubmit="addTaskSubmitHandler"
        @closeAadTaskDialog="closeAadTaskDialog"></add-task-dialog>
    <edit-task-dialog ref="editTaskRef" :dialogStatus="eidtTaskDialogParams.dialogStatus"
        :taskInfo="eidtTaskDialogParams.taskInfo" @updateTaskStatus="editTaskSubmitHandler"
        @closeAadTaskDialog="closeEditTaskDialog"></edit-task-dialog>
   
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, Ref } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    Document,
    Plus,
    Edit,
    Delete,
    Upload,
    SetUp,
    Menu,
} from "@element-plus/icons-vue";
import HttpService from "@/api/api.js";
import paginationCom from "@/components/pagination/paginationComNormal.vue";
import * as _ from "lodash";
import addTaskDialog from "@/components/Dialog/addTaskDialog.vue";
import editTaskDialog from "@/components/Dialog/editTaskDialog.vue";
interface taskInfo {
    id?: number;
    code: number;
    taskname: string;
    taskstatus: number | string;
    taskalias: string;
    type: string;
    mark?: string;
    ruleFile?: string;
    modelFile?: string;
    ruleStore?: object;
    modelStore?: object;
    taskShow: string;
    dataBand: number,
    dataFormat: string,
    dataType: string,
    projective: string
}
interface Pagination {
    page_index: number;
    page_size: number;
    page_total: number;
}
interface Iparams {
    keyWord: string;
    pageNo: number;
    pageSize: number;
}
let tableKey: Ref<number> = ref(0);
let infoList: Array<taskInfo> = reactive<taskInfo[]>([]);
let taskPagination: Pagination = reactive({
    page_index: 1,
    page_size: 10,
    page_total: 0,
});
let viewHeight: Ref<number> = ref(window.innerHeight - 255);
let tableLoading: Ref<boolean> = ref(false);

interface addTaskIn {
    dialogStatus: boolean
}
interface editTakIn {
    dialogStatus: boolean,
    taskInfo: taskInfo
}
let addTaskDialogParams: addTaskIn = reactive({
    dialogStatus: false
})
let eidtTaskDialogParams: editTakIn = reactive({
    dialogStatus: false,
    taskInfo: {
        id: 0,
        taskname: '',
        taskalias: '',
        type: '100',
        code: 101,
        taskstatus: '关闭',
        mark: '',
        modelFile: '',
        ruleFile: '',
        taskShow: '',
        dataBand: NaN,
        dataFormat: "",
        dataType: "",
        projective: ""
    }
})
const addTaskRef = ref()
const editTaskRef = ref()
const openAadTaskDialog = function () {
    addTaskDialogParams.dialogStatus = true
}
const openEditTaskDialog = function (taskInfo: taskInfo) {
    eidtTaskDialogParams.taskInfo = taskInfo
    console.log(eidtTaskDialogParams.taskInfo)
    eidtTaskDialogParams.dialogStatus = true
}
const closeAadTaskDialog = function () {
    addTaskDialogParams.dialogStatus = false
}
const closeEditTaskDialog = function () {
    eidtTaskDialogParams.dialogStatus = false
}
const getTaskInfo = function () {
    let params: Iparams = {
        keyWord: "",
        pageNo: taskPagination.page_index,
        pageSize: taskPagination.page_size,
    };
    tableLoading.value = true;
    infoList.length = 1;
    tableKey = ref(Math.random() * 10);
    HttpService.taskInfo.getTaskInfoList(
        params,
        (res: any) => {
            if (res.status == 200 && res.data.data) {
                taskPagination.page_total = res.data.data.total;
                res.data.data.tasks.map((item: taskInfo) => {
                    if (item.taskShow == '1') {
                        infoList.push(item);
                    }
                });
            }
            tableLoading.value = false;
        },
        (error: any) => {
            console.log(error);
            tableLoading.value = false;
        }
    );
};
const taskInfoSizeChangeHanlder = function (page_size: number) {
    taskPagination.page_size = page_size;
    getTaskInfo();
};
const taskInfoIndexChangeHanlder = function (page_index: number) {
    taskPagination.page_index = page_index;
    getTaskInfo();
};
const addTaskSubmitHandler = function (formData: any) {
    addTaskInfo(formData);
};
const editTaskSubmitHandler = function (formData: any) {
    editTaskInfo(formData);
};

const addTaskInfo = function (formData: taskInfo) {
    let params = {
        taskname: formData.taskname,
        code: formData.code,
        mark: formData.mark,
        taskalias: formData.taskalias,
        taskstatus: formData.taskstatus == '开启' ? 1 : 0,
        type: formData.type,
        modelFile: formData.modelFile,
        ruleFile: formData.ruleFile,
        taskShow: '1',
        dataBand: formData.dataBand,
        dataFormat: formData.dataFormat,
        dataType: formData.dataType,
        projective: formData.projective
    };
    HttpService.taskInfo.addTaskInfo(
        params,
        (res: any) => {
            console.log(res.data)
            if (res.status == 200 && res.data) {
                ElMessage({
                    message: '新建任务成功',
                    type: 'success',
                })
                addTaskDialogParams.dialogStatus = false
                addTaskRef.value.resetForm(addTaskRef.value.ruleFormRef)
                getTaskInfo()
            }
        },
        (error: any) => {
            console.log(error);
        }
    );
};

const editTaskInfo = function (formData: taskInfo) {
    let params = {
        id: formData.id,
        taskname: formData.taskname,
        code: formData.code,
        mark: formData.mark,
        taskalias: formData.taskalias,
        taskstatus: formData.taskstatus == '开启' ? 1 : 0,
        type: formData.type,
        modelFile: formData.modelFile,
        ruleFile: formData.ruleFile,
        taskShow: '1',
        dataBand: formData.dataBand,
        dataFormat: formData.dataFormat,
        dataType: formData.dataType,
        projective: formData.projective
    };
    console.log(params)
    HttpService.taskInfo.editTaskInfo(
        params,
        (res: any) => {
            console.log(res.data)
            if (res.status == 200 && res.data) {
                ElMessage({
                    message: '更新任务成功',
                    type: 'success',
                })
                eidtTaskDialogParams.dialogStatus = false
                editTaskRef.value.resetForm(addTaskRef.value.ruleFormRef)
                getTaskInfo()
            }
        },
        (error: any) => {
            console.log(error);
        }
    );
};
const changeTaskStatus = function (task: taskInfo): boolean {
    let params = {
        id: task.id,
        status: task.taskstatus == 1 ? '0' : '1'
    };
    HttpService.taskInfo.changeTaskStatus(
        params,
        (res: any) => {
            console.log(res.data)
            if (res.status == 200 && res.data) {
                ElMessage({
                    message: '更改当前任务状态成功',
                    type: 'success',
                })
                addTaskDialogParams.dialogStatus = false
                addTaskRef.value.resetForm(addTaskRef.value.ruleFormRef)
                getTaskInfo()
            } else {
                ElMessage({
                    message: '更改当前任务状态失败',
                    type: 'error',
                })
            }
        },
        (error: any) => {
            console.log(error);
        }
    );
    return true;
}

const changeTaskStatusHanlder = function (task: taskInfo) {
    ElMessageBox.confirm(
        '确定要更改当前任务状态么?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        changeTaskStatus(task)
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消',
        })
    })
}

const deleteTaskHandler = function (task: taskInfo) {
    ElMessageBox.confirm(
        '确定要删除当前任务么?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        deleteTask(task)
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消',
        })
    })
}
const deleteTask = function (task: taskInfo) {
    let params = {
        id: task.id,
    };
    HttpService.taskInfo.deleteTask(
        params,
        (res: any) => {
            console.log(res.data)
            if (res.status == 200 && res.data) {
                ElMessage({
                    message: '删除任务成功',
                    type: 'success',
                })
                getTaskInfo()
            } else {
                ElMessage({
                    message: '删除任务失败',
                    type: 'error',
                })
            }
        },
        (error: any) => {
            console.log(error);
        }
    );
    return true;
}


getTaskInfo();
window.onresize = _.debounce(() => {
    let h = window.innerHeight - 255;
    viewHeight.value = h;
}, 100);
</script>

<style lang="scss" scoped>
.tit-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: center;

    .task-title {
        font-size: 18px;
        font-weight: 600;
        font-family: "Courier New", Courier, monospace;
    }
}

.file-name-container {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    .file-name {
        margin-left: 5px;
    }
}

.task-code {
    width: 70px;
    font-weight: 600;
}
</style>
<style lang="scss">
.switch-style {
    opacity: 1 !important;

    .el-switch__core {
        cursor: pointer !important;
    }
}
</style>
